<template>
  <div class="order">
    <a-card>
      <!-- <a-input v-model="exchangeRate" :style="{ width: '320px' }" placeholder="Please enter something" @change="ruleLoading">
        <template #prepend>USD汇率</template>
      </a-input> -->
      <lookUpText title="采购单头" />
      <div style="padding: 5px"></div>
      <vxe-table
        border
        show-footer
        :row-config="{ isCurrent: true, isHover: true }"
        :column-config="{ isCurrent: true, resizable: true }"
        :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :data="topTitle"
        :menu-config="menuConfig"
        @checkbox-all="selectAllChangeEvent"
        @checkbox-change="selectChangeEvent"
        @menu-click="contextMenuClickEvent"
      >
        <vxe-column field="value" width="100" title="采购编码">
          <template #default="{ row }"> 新编号 {{ row.valueNo }} </template>
        </vxe-column>
        <vxe-column field="value" :edit-render="{}" width="140" title="采购日期">
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.requirementDate }}</span>
          </template>
          <template #edit="{ rowIndex }">
            <vxe-input v-model="topTitle[rowIndex].requirementDate" type="date" class="my-input" transfer></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="value" :edit-render="{ autoselect: true }" width="140" title="采购单别">
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.vendorDataPartition }}</span>
          </template>
          <template #edit="{ rowIndex }">
            <vxe-select v-model="topTitle[rowIndex].vendorDataPartition" transfer>
              <vxe-option v-for="item in purchaseOrderList" :key="item.single" :value="item.single" :label="item.singleName"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="value" width="200" title="供应商编号">
          <template #default="{ rowIndex }">
            <a-select
              v-model="topTitle[rowIndex].supplierNo"
              allow-search
              @input-value-change="(param) => filterMethod(param, 'supplierNo')"
            >
              <a-option
                v-for="item in supplierOptionListCopy"
                :key="item.supplierNo"
                :value="item.supplierNo"
                :label="item.supplierNo + '(' + item.supplierName + ')'"
                @click="clickSupplier(item, rowIndex)"
              ></a-option>
            </a-select>
          </template>
        </vxe-column>
        <vxe-column field="value" width="200" title="供应商">
          <template #default="{ rowIndex }">
            <a-select
              v-model="topTitle[rowIndex].supplierName"
              allow-search
              @input-value-change="(param) => filterMethod(param, 'supplierName')"
            >
              <a-option
                v-for="item in supplierOptionListCopy"
                :key="item.supplierName"
                :value="item.supplierName"
                :label="item.supplierName"
                @click="clickSupplier(item, rowIndex)"
              ></a-option>
            </a-select>
          </template>
        </vxe-column>
        <vxe-column field="value" width="200" title="币种">
          <template #default="{ rowIndex }">
            <a-select v-model="topTitle[rowIndex].currency" allow-search>
              <a-option
                v-for="item in currencyList"
                :key="item.value"
                :value="item.value"
                :label="item.label + '(' + item.value + ')'"
                @click="clickCurrency(item, rowIndex)"
              ></a-option>
            </a-select>
          </template>
        </vxe-column>
        <vxe-column field="value" width="200" readonly title="税种">
          <template #default="{ rowIndex }">
            <a-select v-model="topTitle[rowIndex].taxCategory" allow-search>
              <a-option
                v-for="item in categoriesTaxesList()"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                @click="clickCategoriesTaxes(item, rowIndex)"
              ></a-option>
            </a-select>
          </template>
        </vxe-column>
        <vxe-column field="value" width="200" title="税率">
          <template #default="{ rowIndex }">
            <a-input v-model="topTitle[rowIndex].taxRate" @input="clickTaxRate(topTitle[rowIndex].taxRate, rowIndex)">
              <template #suffix> % </template>
            </a-input>
          </template>
        </vxe-column>
        <vxe-column field="value" width="300" title="付款条件">
          <template #default="{ rowIndex }">
            <a-select v-if="paymentTerms" v-model="topTitle[rowIndex].paymentId" allow-search>
              <a-option
                v-for="item in paymentTerms"
                :key="item.paymentTermCode"
                :value="item.paymentTermCode"
                :label="item.paymentTermName"
                @click="playPombupm(item, rowIndex)"
              ></a-option>
            </a-select>
          </template>
        </vxe-column>
        <vxe-column field="shippingAddressOne" width="300" title="收货地址">
          <template #default="{ rowIndex }">
            <vxe-textarea v-model="topTitle[rowIndex].shippingAddressOne" size="mini"></vxe-textarea>
          </template>
        </vxe-column>
        <vxe-column field="purchaserNo" width="200" title="采购人员">
          <template #default="{ rowIndex }">
            <a-select v-model="topTitle[rowIndex].purchaserNo" allow-search>
              <a-option v-for="item in purchasingOption" :key="item.mv001" :value="item.mv001" :label="item.mv002"></a-option>
            </a-select>
          </template>
        </vxe-column>
        <vxe-column field="remark" width="500" title="备注">
          <template #default="{ rowIndex }">
            <vxe-textarea v-model="topTitle[rowIndex].remark" size="mini"></vxe-textarea>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      >
      </vxe-pager> -->
      <div style="padding: 25px"></div>
      <lookUpText title="采购单身" />
      <vxe-table
        border
        show-footer
        :row-config="{ isCurrent: true }"
        :column-config="{ isCurrent: true, resizable: true }"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :data="singleDataList"
        :menu-config="menuBodyConfig"
        @checkbox-all="selectAllChangeEvent"
        @checkbox-change="selectChangeEvent"
        @menu-click="contextMenuBodyClickEvent"
      >
        <vxe-column field="value" width="100" title="采购编码" :edit-render="{}">
          <template #default="{ row }">
            <span class="topNpmBom">新编号{{ row.valueNo }}</span>
          </template>
          <template #edit="{ rowIndex }">
            <vxe-select v-model="singleDataList[rowIndex].valueNo" transfer @change="(param) => clickValueNom(param.value, rowIndex)">
              <vxe-option
                v-for="(item, index) in supplierList"
                :key="index"
                :value="index + 1"
                :label="'新编号' + (index + 1)"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="value" width="160" title="品号" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.productId }}</span>
          </template>
        </vxe-column>
        <vxe-column field="value" width="300" title="品名" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.productName }}</span>
          </template>
        </vxe-column>
        <vxe-column field="value" width="220" title="规格" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.specification }}</span>
          </template>
        </vxe-column>
        <vxe-column field="value" width="160" title="供应商" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.supplierName }}</span>
          </template>
        </vxe-column>
        <vxe-column
          field="value"
          title="采购单价"
          width="150"
          :edit-render="{}"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        >
          <template #edit="{ rowIndex }">
            <input v-model="singleDataList[rowIndex].purchasePrice" style="width: 100%" type="Number" @change="timeCalculation(rowIndex)" />
          </template>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.purchasePrice }}</span>
          </template>
        </vxe-column>
        <vxe-column
          field="value"
          width="150"
          title="采购数量"
          :edit-render="{}"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        >
          <template #edit="{ rowIndex }">
            <input
              v-model="singleDataList[rowIndex].purchaseNumber"
              style="width: 100%"
              type="text"
              class="my-input"
              @change="timeCalculation(rowIndex)"
            />
          </template>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.purchaseNumber }}</span>
          </template>
        </vxe-column>
        <vxe-column field="value" width="120" title="已采购数量" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.purchasedQuantity }} </span>
          </template>
        </vxe-column>

        <vxe-column field="value" width="60" title="单位" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.unit }}</span>
          </template>
        </vxe-column>

        <vxe-column field="value" title="币种" width="150">
          <template #default="{ rowIndex }">
            <a-select v-model="singleDataList[rowIndex].currency" disabled allow-search @change="timeCalculation(rowIndex)">
              <a-option
                v-for="item in currencyList"
                :key="item.value"
                :value="item.value"
                :label="item.label + '(' + item.value + ')'"
              ></a-option>
            </a-select>
          </template>
        </vxe-column>
        <!-- <vxe-column field="value" width="200" readonly title="税种">
          <template #default="{ rowIndex }">
            <a-select v-model="singleDataList[rowIndex].taxCategory" allow-search @change="timeCalculation(rowIndex)">
              <a-option v-for="item in categoriesTaxesList()" :key="item.value" :value="item.value" :label="item.label"></a-option>
            </a-select>
          </template>
        </vxe-column> -->
        <vxe-column field="taxRate" title="税率" :edit-render="{}" width="110">
          <template #edit="{ rowIndex }">
            <input
              v-model="singleDataList[rowIndex].taxRate"
              style="width: 100%"
              type="text"
              class="my-input"
              @change="timeCalculation(rowIndex)"
            />
          </template>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.taxRate ? row.taxRate : 0 }}%</span>
          </template>
        </vxe-column>

        <vxe-column field="value" width="150" title="采购总金额(RMB、含税)" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.totalAmount }}</span>
          </template>
        </vxe-column>
        <!-- <vxe-column field="value" width="150" title="税前总金额" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.taxtotalAmount }}</span>
          </template>
        </vxe-column> -->
        <vxe-column field="value" width="150" title="税额" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.taxMoney }}</span>
          </template>
        </vxe-column>
        <vxe-column field="value" width="120" title="参考销售单号" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.referenceType }}-{{ row.referenceId }} -{{ row.referenceSerialId }} </span>
          </template>
        </vxe-column>

        <vxe-column field="value" width="120" title="请购日期" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.requirementDate }} </span>
          </template>
        </vxe-column>

        <vxe-column field="value" width="120" title="预定交货日" show-header-overflow show-overflow="title" show-footer-overflow>
          <template #default="{ row }">
            <span class="topNpmBom">{{ row.deliveryDate }} </span>
          </template>
        </vxe-column>

        <vxe-column field="value" width="500" title="备注">
          <template #default="{ rowIndex }">
            <vxe-textarea v-model="singleDataList[rowIndex].remark" size="mini"></vxe-textarea>
          </template>
        </vxe-column>
      </vxe-table>
      <div style="padding: 5px"></div>
      <!-- <a-descriptions title="采购单合计信息" :column="{ xs: 1, md: 3, lg: 4 }">
        <a-descriptions-item v-for="(item, index) of amountOption" :key="index" :label="item.label" :span="item.span ?? 1">
          <a-tag>{{ item.value }}</a-tag>
        </a-descriptions-item>
      </a-descriptions> -->

      <div style="padding: 5px"></div>
      <div class="formHeader-criteria-postizz">
        <a-button type="primary" @click="creatorPurtcAdd">生成采购单</a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './purchaseOrderAdd';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import lookUpText from '@com/lookUpText/lookUpText.vue';
import { categoriesTaxesList } from '@/utils/base';
export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup, lookUpText },
  setup() {
    const {
      base,
      init,
      menuConfig,
      selectAllChangeEvent,
      selectChangeEvent,
      vendorDataPartition,
      filterMethod,
      inputTion,
      clickSupplier,
      clickTaxCategory,
      contextMenuClickEvent,
      menuBodyConfig,
      contextMenuBodyClickEvent,
      bodySupplierView,
      clickValueNom,
      creatorPurtcAdd,
      clickCurrency,
      timeCalculation,
      clickCategoriesTaxes,
      clickTaxRate,
      ruleLoading,
      playPombupm,
    } = importConfig();
    init();
    return {
      ...toRefs(base),
      init,
      menuConfig,
      selectAllChangeEvent,
      selectChangeEvent,
      vendorDataPartition,
      filterMethod,
      inputTion,
      clickSupplier,
      clickTaxCategory,
      contextMenuClickEvent,
      menuBodyConfig,
      contextMenuBodyClickEvent,
      bodySupplierView,
      clickValueNom,
      creatorPurtcAdd,
      clickCurrency,
      categoriesTaxesList,
      timeCalculation,
      clickCategoriesTaxes,
      clickTaxRate,
      ruleLoading,
      playPombupm,
    };
  },
});
</script>

<style lang="less" scoped>
.topNpmBom {
  font-weight: bold;
}
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }

  &-bomxa {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
}
.formHeader {
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}

.itemoption {
  font-size: 12px;
  color: #999;
  width: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  &-aspanasm {
    font-size: 14px;
    font-weight: 900;
    color: #3d528b;
    padding-left: 10px;
  }
  &-ioasdoasn {
    width: 180px;
    display: inline-block;
    white-space: normal;
  }
}
</style>
